{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"任务明细",back:1} %}
    <mu-tabs :value.sync="curTab" inverse :color="c1" text-color="rgba(0, 0, 0, .54)" full-width>
        <mu-tab>信息</mu-tab>
        <mu-tab>雇佣</mu-tab>
        <mu-tab>操作</mu-tab>
    </mu-tabs>
    <div v-show="curTab == 0">
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                订单状态
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                <span :class="en.status >= 0 ? 'c01':''">创建</span><span class="pad5">/</span>
                <span :class="en.status >= 100 ? 'c01':''">报价</span><span class="pad5">/</span>
                <span :class="en.status >= 300 ? 'c01':''">雇佣</span><span class="pad5">/</span>
                <span :class="en.status >= 600 ? 'c01':''">确认</span><span class="pad5">/</span>
                <span :class="en.status >= 900 ? 'c01':''">评价</span><span class="pad5">/</span>
                <span :class="en.status >= 900 ? 'c01':''">完成</span>
                {#                    什么时候支付？#}
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc">
                <span class="fa fa-th-large c12"></span>
                <span class="fs10 c11 padl5 flex1">[[en.title]]</span>
                <span class="padl5 padr5 padt3 padb2 fs6 bdso bdc11 c11 round2">[[en.cat2.name]]</span>
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flex-r flex-start fs8 c11 lh2">
                <div class="flex1">
                    <div class="flex-r">
                        <div>预约时间：</div>
                        <div>[[str2time(en.bookAt)]]</div>
                    </div>
                    <div class="flex-r">
                        <div>备注信息：</div>
                        <div>[[en.tips]]</div>
                    </div>
                    <div class="flex-r">
                        <div>区域限制：</div>
                        <div v-if="isTrue(en.favorProvince)">
                            <span v-if="isTrue(en.favorProvince)">[[en.favorProvince]]</span>
                            <span v-if="isTrue(en.favorCity)"> / [[en.favorCity]]</span>
                            <span v-if="isTrue(en.favorArea)"> / [[en.favorArea]]</span>
                        </div>
                        <div v-if="!isTrue(en.favorProvince)">不限制</div>
                    </div>
                    <div class="flex-r flex-start" v-if="isTrue(en.favor)">
                        <div>雇佣要求：</div>
                        <div class="flex1">
                            <div v-if="isTrue(en.favor.isInsurance)">优先 <span class="c1">保证金商家</span></div>
                            <div v-if="isTrue(en.favor.isCompany)">优先 <span class="c1">企业认证商家</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div  v-if="en.status < 300">
                <div class="bc2 pad5 round5 flrc fs8 c13 op8 lh2" v-if="timeLeft(en.expireAt) != '已过期'">
                    订单倒计时：[[timeLeft(en.expireAt)]]
                </div>
                <div class="bc12 pad5 round5 flrc fs8 c11 op5 lh2" v-if="timeLeft(en.expireAt) == '已过期'">
                    订单已过期
                </div>
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                位置信息
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
                <div class="flex1 fs8">
                    <div> [[en.address.address]]</div>
                    <div> [[en.address.province]] / [[en.address.city]] / [[en.address.area]]</div>
                </div>
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                联系人
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
                <div class="flex1 flrc">
                    <div class="flex1">[[en.contact.name]]</div>
                    <div>[[en.contact.phone]]</div>
                </div>
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                任务信息
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                <div>任务编号：[[en.sn]]</div>
                <div>创建时间：[[str2time(en.createAt)]]</div>
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                图片附件
            </div>
            <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                 <img :src="picUrl(item)" class="w100" alt="" v-for="item in en.pics" onerror="this.src=pic404">
                {#                <div class="flex-r flex-start padt6 padb6">#}
                {#                    <div class="scrollX-Box flex-start">#}
                {#                        <div class="scrollX-Item marr5 pos-r" v-for="item in en.pics">#}
                {#                            <div class=""></div>#}
                {#                             <img :src="item" class="wh30-30 scrollX-Item" alt="" onerror="this.src=pic404">#}
                {#                        </div>#}
                {#                    </div>#}
                {#                </div>#}
            </div>
        </div>
        <div class="bc13 pad5">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                注意事项
            </div>
            <div class="bcf pad6 round3 bdbda fs8 c12 fs8 c11 lh2">
                <div><span class="fa fa-caret-right padr5"></span>接单报价入门须知？</div>
                <div><span class="fa fa-caret-right padr5"></span>如何正确预约？</div>
                <div><span class="fa fa-caret-right padr5"></span>上门后如何规范服务？</div>
                <div><span class="fa fa-caret-right padr5"></span>完工后如何确认订单？</div>
            </div>
        </div>
    </div>

    {#    报价信息#}
    <div class="bc13 pad5" v-show="curTab == 1">
        <div class="mar5 bcf pad10 tac c12 fs8 bdda round3" v-if="!isTrue(votes) && !isTrue(choosed)">
            暂无报价
        </div>

        {#        <div class="tac bc13 c13 bdbso">---</div>#}

        <div>

            <div class="mar5 bcf pad10 tac c12 fs8 bdda round3" v-if="!isTrue(choosed)">
                尚未雇佣
            </div>

            <div class="bcf flrc mar5 pad5 pos-r bdso" v-if="isTrue(choosed)">
                <div class="flrc pos-r flex1">
                    <div class="wh15-15">
                         <img class="wh15-15 round" :src="picUrl(choosed.user.avatar)" alt="" onerror="this.src=pic404">
                    </div>
                    <div class="flex1 padl5 lh2">
                        <div class="c11 fs12 ofe">
                            <span class="fs10 padr5 ofe">[[choosed.user.name]] </span>
                            <span class="c12 fa fa-angle-right"></span>
                            <mu-ripple @click="goto('shopIndex',{id:choosed.user.shop.id})"></mu-ripple>
                        </div>
                        <div>
                            <div class="padr5 fs8"><span class="fa fa-check-circle c01 padr3" v-for="tag in choosed.user.shop.tags">[[tag.showName]]</span></div>
                        </div>
                        <div class="c12">[[choosed.phone]]</div>
                    </div>
                </div>
                <div class="tar">
                    <mu-button flat small color="success">中标</mu-button>
                    <div class="c1 fwb fs12 tar"><span class="fs8 c12 padlr5">报价</span>￥[[choosed.price]]</div>
                </div>
            </div>
        </div>

        <div class="lh2 fs9 c11 ">
            <div v-for="item in votes">
                <div class="bcf flrc mar5 pad5 pos-r">
{#                    个人用户#}
                    <div class="flrc pos-r flex1" v-if="!isTrue(item.user.shop)">
                        <div class="wh15-15">
                             <img class="wh15-15 round" :src="picUrl(item.user.avatar)" alt="" onerror="this.src=pic404">
                        </div>
                        <div class="flex1 padl5 lh2">
                            <div class="c11 fs12 ofe">
                                <span class="fs9 padr5 ofe">[[item.user.name]] </span>
                                <span class="c12 fa fa-angle-right"></span>
                                <mu-ripple @click="goto('shopIndex',{id:item.user.shop.id})"></mu-ripple>
                            </div>

                            <div>
                                <div class="padr5 fs8"><span class="fa fa-check-circle c01 padr3" v-for="tag in item.user.shop.tags">[[tag.showName]]</span></div>
                            </div>
                            <div class="c11 fs12">[[item.phone]]</div>
                        </div>
                    </div>
{#                    企业用户#}
                    <div class="flrc pos-r flex1" v-if="isTrue(item.user.shop)">
                        <div class="wh15-15">
                             <img class="wh15-15 round" :src="picUrl(item.user.avatar)" alt="" onerror="this.src=pic404">
                        </div>
                        <div class="flex1 padl5 lh2">
                            <div class="c11 fs12 ofe">
                                <span class="fs9 padr5 ofe">[[item.user.shop.name]] </span>
                                <span class="c12 fa fa-angle-right"></span>
                                <mu-ripple @click="goto('shopIndex',{id:item.user.shop.id})"></mu-ripple>
                            </div>

                            <div>
                                <div class="padr5 fs8"><span class="fa fa-check-circle c01 padr3" v-for="tag in item.user.shop.tags">[[tag.showName]]</span></div>
                            </div>
                            <div class="c11 fs12">[[item.user.shop.phone]]</div>
                        </div>
                    </div>
                    <div class="tar">
{#                        <mu-button @click="hire(item.id)" flat small :color="c3">雇佣他</mu-button>#}
                        <mu-button @click="goto('myTaskPayHire',{id:item.id,money:item.price})" flat small :color="c3" v-if="!isTrue(choosed)">雇佣他</mu-button>
{#                        <mu-button flat small :color="c3" v-if="!isTrue(choosed)"></mu-button>#}
                        <div class="c1 fwb fs12 tar"><span class="fs8 c12 padlr5">报价</span>￥[[item.price]]</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {#    操作#}
    <div v-show="curTab == 2">
{#        <span :class="en.status >= 0 ? 'c01':''">创建</span><span class="pad5">/</span>#}
{#        <span :class="en.status >= 100 ? 'c01':''">报价</span><span class="pad5">/</span>#}
{#        <span :class="en.status >= 300 ? 'c01':''">雇佣</span><span class="pad5">/</span>#}
{#        <span :class="en.status >= 600 ? 'c01':''">确认</span><span class="pad5">/</span>#}
{#        <span :class="en.status >= 900 ? 'c01':''">评价</span><span class="pad5">/</span>#}
{#        <span :class="en.status >= 900 ? 'c01':''">完成</span>#}
        <div class="mar10 pad10 dbda round3 tac c12 bcf" v-if="en.status != 0 && en.status != 300">暂无可执行操作</div>
        <div class="pad5 fs8 c12 lh2" v-if="en.status == 0">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                取消订单
            </div>
            <div class="bcf pad6 round3 bdbda fs8 c12 fs8 c11 lh2">
                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                    <mu-text-field v-model="content" full-width multi-line :rows="3"
                                   max-length="200" :rows-max="6" help-text="订单创建后尚未雇佣前可以取消订单"></mu-text-field>
                </div>
                <div class="scrollX-Box1">
                    <div class="scrollX-Item mar3" v-for="item in cancelList">
                        <mu-chip color="grey600" @click="content = (item)">[[item]]</mu-chip>
                    </div>
                </div>
                <div class="tar pad5">
                    <mu-button @click="cancel(en.id)" :color="c1" large round full-width>取消订单</mu-button>
                </div>
            </div>
        </div>
        <div class="pad5 fs8 c12 lh2"  v-if="(en.status == 300 || en.status == 500 )&& !showAppeal">
            <div class="bcf pad6 round3 bdbda fs9 c12">
                确认订单
            </div>
            <div class="bcf pad6 round3 bdbda fs8 c12 fs8 c11 lh2">
                <div class="padtb10">
                    <div>
                        <mu-button small icon :color="star > 0? 'warning':'grew100'" @click="setStar(1)">
                            <mu-icon value="grade"></mu-icon>
                        </mu-button>
                        <mu-button small icon :color="star > 1? 'warning':'grew100'" @click="setStar(2)">
                            <mu-icon value="grade"></mu-icon>
                        </mu-button>
                        <mu-button small icon :color="star > 2? 'warning':'grew100'" @click="setStar(3)">
                            <mu-icon value="grade"></mu-icon>
                        </mu-button>
                        <mu-button small icon :color="star > 3? 'warning':'grew100'" @click="setStar(4)">
                            <mu-icon value="grade"></mu-icon>
                        </mu-button>
                        <mu-button small icon :color="star > 4? 'warning':'grew100'" @click="setStar(5)">
                            <mu-icon value="grade"></mu-icon>
                        </mu-button>
                    </div>
                </div>
                <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                    <mu-text-field v-model="content" full-width multi-line :rows="3"
                                   max-length="200" :rows-max="6" help-text="请填写您对本次服务的评价"></mu-text-field>
                </div>

                <div class="scrollX-Box1">
                    <div class="scrollX-Item mar3" v-for="item in confirmList">
                        <mu-chip color="grey600" @click="content = (item)">[[item]]</mu-chip>
                    </div>
                </div>
                <div class="tar pad5">
                    <mu-button @click="confirm(en.id)" :color="c1" large round full-width>确认订单</mu-button>
                </div>
            </div>
        </div>
        <div class="pad5 fs8 c12 lh2" v-if="en.status >= 300">
            <div class="tac pad3 c12" @click="showAppeal = !showAppeal" v-if="!showAppeal">对此单有异议?点击投诉</div>
            <div v-if="showAppeal">
                <div class="bcf pad6 round3 bdbda fs9 c12">
                    投诉订单
                </div>
                <div class="bcf pad6 round3 bdbda fs8 c12 fs8 c11 lh2">
{#                    <div class="scrollX-Box1">#}
{#                        <div class="scrollX-Item mar3" v-for="item in 5">#}
{#                            <mu-chip color="grey600" @click="content = ('取消原因')">投诉原因</mu-chip>#}
{#                        </div>#}
{#                    </div>#}
                    <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
                        <mu-text-field v-model="appealContent" full-width multi-line :rows="3"
                                       max-length="300" :rows-max="6" help-text="请填写投诉原因"></mu-text-field>
                    </div>
                    <div class="tar pad5">
                        <mu-button @click="appeal(en.id)" :color="c1" large round full-width>提交</mu-button>
                    </div>
                </div>
            </div>

            <div class="tac pad3 c12" @click="showAppeal = !showAppeal" v-if="showAppeal">不投诉！点这里</div>
        </div>
    </div>
{% endblock %}
